<template>
  <div>
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="100px"
      style="width: 750px"
    >
      <el-form-item label="封面图片" prop="vimg">
        <el-upload
          class="avatar-uploader"
          name="sbb"
          :action="`${UPLOADURL}/upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.vimg" :src="form.vimg" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="课程名" prop="title">
        <el-input style="width: 300px" v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="视频简介" prop="vinfo">
        <div style="border: 1px solid #ccc; width: 300px">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 200px; overflow-y: hidden"
            v-model="form.vinfo"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </div>
      </el-form-item>
      <el-form-item label="课程时长" prop="vtime">
        <el-input style="width: 300px" v-model="form.vtime"></el-input>
      </el-form-item>
      <el-form-item label="卡路里" prop="Kcal">
        <el-input style="width: 300px" v-model="form.Kcal"></el-input>
      </el-form-item>
      <el-form-item label="难度" prop="exp">
        <el-radio-group style="line-height: 30px" v-model="form.exp">
          <el-radio label="零基础">零基础</el-radio>
          <el-radio label="初级">初级</el-radio>
          <el-radio label="中级">中级</el-radio>
          <el-radio label="高级">高级</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="部位" prop="vbody">
        <el-radio-group v-model="form.vbody">
          <el-radio label="手部">手部</el-radio>
          <el-radio label="肩部">肩部</el-radio>
          <el-radio label="背部">背部</el-radio>
          <el-radio label="腰部">腰部</el-radio>
          <el-radio label="胸部">胸部</el-radio>
          <el-radio label="臀部">臀部</el-radio>
          <el-radio label="腿部">腿部</el-radio>
          <el-radio label="颈部">颈部</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="器械" prop="calorie">
        <el-radio-group v-model="form.calorie">
          <el-radio label="无">无</el-radio>
          <el-radio label="哑铃">哑铃</el-radio>
          <el-radio label="弹力带">弹力带</el-radio>
          <el-radio label="瑜伽球">瑜伽球</el-radio>
          <el-radio label="泡沫轴">泡沫轴</el-radio>
          <el-radio label="杠铃">杠铃</el-radio>
          <el-radio label="跳绳">跳绳</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分类" prop="vtype">
        <el-radio-group v-model="form.vtype">
          <el-radio label="减脂减重">减脂减重</el-radio>
          <el-radio label="平坦腹部">平坦腹部</el-radio>
          <el-radio label="瘦腿">瘦腿</el-radio>
          <el-radio label="体态">体态</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">添加课程</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import httpApi from "@/http";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  components: { Editor, Toolbar },

  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },

  data() {
    return {
      form: {
        vimg: "",
        title: "",
        vinfo: "",
        vtime: "",
        Kcal: "",
        exp: "1",
        vbody: "1",
        calorie: "1",
        vtype: "1",
      },
      rules: {
        vimg: [{ required: true, message: "必填", trigger: "blur" }],
        title: [{ required: true, message: "必填", trigger: "blur" }],
        vinfo: [{ required: true, message: "必填", trigger: "blur" }],
        vtime: [{ required: true, message: "必填", trigger: "blur" }],
        Kcal: [{ required: true, message: "必填", trigger: "blur" }],
        exp: [{ required: true, message: "必填", trigger: "blur" }],
        vbody: [{ required: true, message: "必填", trigger: "blur" }],
        calorie: [{ required: true, message: "必填", trigger: "blur" }],
        vtype: [{ required: true, message: "必填", trigger: "blur" }],
      },
      editor: null,
      toolbarConfig: {
        toolbarKeys: ["bold", "underline", "italic", "color"],
      },
      editorConfig: { placeholder: "请输入内容..." },
      mode: "simple",
    };
  },
  watch: {
    "form.vinfo"(newVal) {
      const videoIntro = newVal.replace(/^<p>(.*?)<\/p>$/, "$1");
      this.form.vinfo = videoIntro;
    },
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },

    // 提交修改的课程
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          httpApi.courseApi.queryAdd(this.form).then((res) => {
            console.log("提交成功", res);
            if (res.data.code == 200) {
              this.$message({ type: "success", message: "添加成功" });
              this.$router.push("/home/course-list");
            } else {
              this.$message({ type: "error", message: "添加失败" });
            }
          });
        }
      });
    },

    /** 上传成功后执行 */
    handleAvatarSuccess(res, file) {
      console.log(res);
      /** 将上传成功的图片访问路径赋值给form对象的属性 */
      this.form.vimg = res.pic;
      /** 想办法将错误消息移除 */
      // this.$refs.form.clearValidate();
    },
    /** 图片上传之前执行 */
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png" || "image/git";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  height: 120px;
  display: block;
}
</style>
